<!-- 试验级因素配置弹窗 -->
<template>
    <div class="experiment-factor-config-dialog">
        <el-dialog title="试验级因素配置" :visible.sync="dialogVisible" width="85vw" :before-close="handleClose"
            :close-on-click-modal="false" :destroy-on-close="true">
            <div class="experiment-factor-config flex flex-row">
                <div class="experiment-factor-config-left-tree flex flex-col">
                    <div class="experiment-factor-config-tree-title flex justify-center items-center" style="height: 32px">
                        模型类型
                    </div>
                    <div class="experiment-factor-config-tree-box flex" style="height: calc(100% - 32px)">
                        <Tree ref="nodeConfigTreeRef" :isUseCustomData="true" :treeData="treeData"
                            @nodeClick="nodeClick" :defaultExpandedKeys="defaultExpandedKeys" :defaultExpandAll="true"
                            :currentNodeKey="currentNodeKey" :fileMenu="right_menuList.rightMenuList_4"
                            @handleAddNode="handleAddNode" @handleMenuClick="handleMenuClick"
                            @moveNodeOrder="moveNodeOrder">
                        </Tree>
                    </div>
                </div>
                <div class="experiment-factor-config-right-box flex flex-col">
                    <div class="experiment-factor-config-right-box__title">
                        因素列表
                    </div>
                    <div class="experiment-factor-config-right-box__member">
                        {{ tableData.length }} 因素
                    </div>
                    <el-tag style="margin-top: 5px; margin-left: 0px;">提示：勾选复选框代表应用对应的因素, 成功勾选之后对容忍区间进行修改。</el-tag>
                    <div class="experiment-factor-config-right-box__split"></div>
                    <!-- <div class="experiment-factor-config-right-box__query_add">
                        <div class="experiment-factor-config-right-box__query">
                            <el-input prefix-icon="el-icon-search" v-model="searchText" class="jtyj-input"
                                clearable></el-input>
                        </div>
                        <div class="experiment-factor-config-right-box__add">
                            <el-button class="jtyj-btn-cancel" @click="handleDelete">删除</el-button>
                            <el-button type="primary" @click="handleAdd">新增</el-button>
                        </div>
                    </div> -->

                    <div class="experiment-factor-config-right-box__table">
                        <el-table ref="multipleTable" :data="filteredTableData" tooltip-effect="dark"
                            style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="name" label="名称" width="150">
                            </el-table-column>
                            <el-table-column prop="parName" label="参数名称" width="150">
                            </el-table-column>
                            <el-table-column prop="dataType" label="数据类型" width="150">
                            </el-table-column>
                            <el-table-column label="结果容忍区间">
                                <template #default="{ row }">
                                    <div class="range-editor">
                                        <el-tag>[</el-tag>
                                        <el-input-number :disabled="!isSelected(row)" v-model="row.resultToleranceInterval.min" @change="handleRangeChange(row)"
                                            controls-position="right" size="small" />
                                        <el-tag>,</el-tag>
                                        <el-input-number :disabled="!isSelected(row)" v-model="row.resultToleranceInterval.max" @change="handleRangeChange(row)"
                                            controls-position="right" size="small" />
                                        <el-tag>]</el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="偏差容忍区间">
                                <template #default="{ row }">
                                    <div class="range-editor">
                                        <el-tag>[</el-tag>
                                        <el-input-number :disabled="!isSelected(row)" v-model="row.deviationToleranceInterval.min" @change="handleRangeChange(row)"
                                            controls-position="right" size="small" />
                                        <el-tag>,</el-tag>
                                        <el-input-number :disabled="!isSelected(row)" v-model="row.deviationToleranceInterval.max" @change="handleRangeChange(row)"
                                            controls-position="right" size="small" />
                                        <el-tag>]</el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import { getModelTypeTree } from "@/api/myspace/experiment-design-tool/experiment-design";
import Tree from "@/components/LeftTree/tree.vue";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
    name: "ExperimentFactorConfigDialog",
    data() {
        return {
            dialogVisible: false,
            treeData: [],
            searchText: '',
            defaultExpandedKeys: [], //树默认要展开的节点
            currentNodeKey: 0,
            isFilterOpen: false,
            filters: {
                status: "",
                tags: "",
                owner: "",
                creator: "",
                lastModifier: "",
                matchType: "include",
            },
            tableData: [{
                name: '经度',
                parName: 'x',
                dataType: 'double',
                resultToleranceInterval: { min: -180, max: 180 },
                deviationToleranceInterval: { min: -5, max: 5 }
            }, {
                name: '纬度',
                parName: 'y',
                dataType: 'double',
                resultToleranceInterval: { min: -90, max: 90 },
                deviationToleranceInterval: { min: -2, max: 2 }
            }, {
                name: '经度',
                parName: 'z',
                dataType: 'double',
                resultToleranceInterval: { min: -10000, max: 20000 },
                deviationToleranceInterval: { min: -1000, max: 2000 }
            }],
            multipleSelection: []

        };
    },
    props: {
        scenarioId: {
            type: Number,
            default: 0,
        },
    },
    components: {
        Tree,
    },
    computed: {
        ...mapState({
            right_menuList: (state) => state.scenarioEditTool.right_menuList,
        }),
        filterNum() {
            return Object.values(this.filters).filter((item) => item).length - 1;
        },
        filteredTableData() {
            console.log(this.searchText);
            if (!this.searchText) return this.tableData
            const search = this.searchText.toLowerCase()
            return this.tableData.filter(item =>
                item.name.toLowerCase().includes(search) ||
                item.address.toLowerCase().includes(search)
            )
        }
    },
    created() {
        this.getModelTypeTree();
    },
    methods: {
        // 获取节点树数据
        getNodeTree() {
            getNodeTree().then((response) => {
                if (response.code == 200) {
                    this.treeData = response.data[0].commonTreeList;
                }
            });
        },

        // 获取模型类型树数据
        getModelTypeTree() {
            getModelTypeTree().then((response) => {
                if (response.code == 200) {
                    this.treeData = response.data[0].commonTreeList;
                }
            });
        },

        // 点击节点
        nodeClick() {
            console.log("点击节点");
        },
        // 移动树节点的顺序
        moveNodeOrder(draggingNode, dropNode, dropType) {
            // globalDataMoveTreeNode({
            //     movedNodeId: draggingNode.data.id, // 被移动节点的id
            //     referenceNodeId: dropNode.data.id, // 参照节点的id
            //     position: dropType == "after" ? 1 : dropType == "before" ? -1 : 0, // 相对位置，before:-1,into:0,after:1
            //     ancestors: draggingNode.data.data.ancestors, // 祖先
            //     folderChildrenOrder: {
            //         parentId:
            //             dropType == "inner" ? dropNode.data.id : dropNode.data.parentId, // 父级id
            //         siblingIds:
            //             dropType == "inner"
            //                 ? Array.from(dropNode.childNodes).map((item) => item.data.id)
            //                 : Array.from(dropNode.parent.childNodes).map(
            //                     (item) => item.data.id
            //                 ),
            //     },
            // }).then((response) => {
            //     if (response.code == 200) {
            //         this.$message.success(
            //             this.$toolHandle.getI18nName(
            //                 this.$zh.setup.responseText,
            //                 this.$en.setup.responseText,
            //                 this.$i18n.locale,
            //                 "success"
            //             )
            //         );
            //         this.getSelfGlobalDataTree();
            //     }
            // });
        },

        // 菜单点击
        handleMenuClick() {

        },

        // 添加节点
        handleAddNode() {

        },

        handleClose(done) {
            this.dialogVisible = false;
        },

        // 表格选中状态改变
        handleSelectionChange(val) {
            console.log(this.multipleSelection);
            // 这里要判断是新增还是删除，需要拿val的数据和当前的multipleSelection数据做对比
            let addOrDelItems = [];
            let array1;
            let array2;
            let isAdd = false;
            // val更多代表是新增，val更少代表是删除
            if (val.length > this.multipleSelection.length) {
                array1 = val;
                array2 = this.multipleSelection;
                isAdd = true;
            } else {
                array1 = this.multipleSelection;
                array2 = val;
                isAdd = false;
            }
            for (let index = 0; index < array1.length; index++) {
                const item = array1[index];
                let addOrDelItem = item;
                for (let index = 0; index < array2.length; index++) {
                    const item2 = array2[index];
                    if (item2.parName === item.parName) {
                        addOrDelItem = null;
                        break;
                    }
                }
                if (addOrDelItem) {
                    addOrDelItems.push(addOrDelItem);
                }
            }

            this.multipleSelection = val;

            if (isAdd) {
                console.log("是新增", addOrDelItems);
            } else {
                console.log("是删除", addOrDelItems);
            }
        },

        // 判断行是否已经被选中
        isSelected(row) {
            return this.multipleSelection.some(item => item.parName === row.parName);
        },

        // 处理区间值改变
        handleRangeChange(row){
            // 这里设置的是之后勾选了才能进行区间改变，所以和后端的交互是更新操作
            console.log('row', row);
            console.log(this.multipleSelection);
        },

        // 表格删除实体
        handleDelete() {

        }
    },
};
</script>

<style lang="scss" scoped>
.experiment-factor-config-dialog {
    .experiment-factor-config {
        width: 1630px;
        height: 700px;

        .experiment-factor-config-left-tree {
            height: 100%;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--ui-border-color-split);
            box-sizing: border-box;
            width: 250px;
            padding-right: 10px;

            .experiment-factor-config-tree-title {
                height: 35px;
                font-weight: var(--ui-font-weight-semibold);
                letter-spacing: 2px;
            }

            .experiment-factor-config-tree-box {
                flex-grow: 1;
                overflow-y: auto;
            }
        }

        .experiment-factor-config-right-box {
            width: calc(100% - 280px);
            padding: 0 50px;
            display: flex;
            flex-direction: column;

            .experiment-factor-config-right-box__title {
                font-size: var(--ui-font-size-title);
                font-weight: var(--ui-font-weight-semibold)
            }

            .experiment-factor-config-right-box__member {
                margin-top: 10px;
            }

            .experiment-factor-config-right-box__split {
                margin-top: 30px;
                border-top: 1px solid var(--ui-border-color-split);
            }

            .experiment-factor-config-right-box__query_add {
                margin-top: 30px;
                padding-bottom: 15px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid var(--ui-border-color-split);

            }

            .experiment-factor-config-right-box__table {
                flex: 1;
                overflow: auto;

                .range-editor {
                    display: flex;
                    align-items: center;
                    gap: 4px;

                    .el-tag {
                        height: 100%;
                    }
                }

                ::v-deep .el-table__row {
                    height: 42px;
                }


            }
        }
    }
}
</style>